<template>
  <div class="content_top">
    <div class="monitor-box">
      <div class="big-circle">
        <div class="little-circle">
          <i class="iconfont iconjiankong"></i>
        </div>
      </div>
      <div class="ellipse">监控回放中...</div>
    </div>
    
    <div class="real-time-monitoring">
      <div class="video-box">
        <video controls :style="{ width: videoWidth + '%', height: videoHeight + '%' }">
          <source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4" />
        </video>
        <div class="left-top-wire">
          <div class="row"></div>
          <div class="column"></div>
        </div>
        <div class="right-top-wire">
          <div class="row"></div>
          <div class="column"></div>
        </div>
        <div class="left-bottom-wire">
          <div class="row"></div>
          <div class="column"></div>
        </div>
        <div class="right-bottom-wire">
          <div class="row"></div>
          <div class="column"></div>
        </div>
      </div>

      <div class="right-data">
        <div class="info-bg">
          <span>车牌号</span>
          <span class="car-info">苏AL6035</span>
          <div class="left-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="left-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
        </div>

        <div class="info-bg" style="margin-top: 86px;">
          <span>所属单位</span>
          <span class="car-info">南京康之冠办公家具有限公司</span>
          <div class="left-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="left-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
        </div>

        <div class="info-bg" style="margin-top: 172px;">
          <span>负责人</span>
          <span class="car-info">楚茂</span>
          <div class="left-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="left-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
        </div>

        <div class="info-bg" style="margin-top: 258px;">
          <span>最大载重</span>
          <span class="car-info">400kg</span>
          <div class="left-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="left-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
        </div>

        <div class="info-bg" style="margin-top: 344px;">
          <span>称重重量</span>
          <span class="car-info">100kg</span>
          <div class="left-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="left-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
        </div>

        <!-- <div class="info-bg monitor-list" style="margin-top: 430px; height: auto;">
          <div class="max-height">
            <el-link class="monitor-num" :underline="false">一号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">二号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">三号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">四号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">一号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">二号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">三号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">四号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">一号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">二号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">三号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">四号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">一号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">二号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">三号摄像头</el-link>
            <el-link class="monitor-num" :underline="false">四号摄像头</el-link>
          </div>
          <div class="left-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-top-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="left-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
          <div class="right-bottom-wire">
            <div class="row"></div>
            <div class="column"></div>
          </div>
        </div> -->

        <div class="return">
          <img src="../images/fanhui.png" @click="returnPage">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      videoWidth: 100,
      videoHeight: 60
    };
  },
  props: {
    menuType: {
      type: Number,
      default: 0
    }
  },
  
  created() {

  },
  
  mounted() {

  },
  
  methods: {
    returnPage() {
      this.$parent.resetPage();
    }
  }
};
</script>

<style  scoped>
.content_top{
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(-20deg, #0b3769 20%,#0a1746 80%);
  padding: 20px 40px 40px 40px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0;
}

.real-time-monitoring {
  position: relative;
}

/* 监控文字 */
.monitor-box{
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.big-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #0A1746;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 99;
}

.little-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(120deg, #16c6cf 10%, #136bb8 90%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.iconjiankong {
  font-size: 32px;
}

.ellipse {
  width: 150px;
  height: 32px;
  background: linear-gradient(120deg, #16c6cf 8%, #136bb8 90%);
  border-radius: 200px;
  font-size: 14px;
  line-height: 32px;
  position: relative;
  margin-left: -30px;
  padding-left: 45px;
  box-sizing: border-box;
}

/* 视频 */
.video-box{
  max-width: 82%;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  position: relative;
}

/* 视频-左上线条 */
.video-box .left-top-wire{
  position: absolute;
  top: -1px;
  left: -1px;
}

.video-box .left-top-wire .row {
  width: 16px;
  height: 2px;
  background: #00baff;
}

.video-box .left-top-wire .column{
  width: 2px;
  height: 14px;
  background: #00baff;
}

/* 视频-右上线条 */
.video-box .right-top-wire{
  display: flex;
  position: absolute;
  top: -1px;
  right: -1px;
}

.video-box .right-top-wire .row {
  width: 14px;
  height: 2px;
  background: #00baff;
}

.video-box .right-top-wire .column{
  width: 2px;
  height: 16px;
  background: #00baff;
}

/* 视频-左下线条 */
.video-box .left-bottom-wire{
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  left: -1px;
  bottom: -1px;
}

.video-box .left-bottom-wire .row {
  width: 16px;
  height: 2px;
  background: #00baff;
}

.video-box .left-bottom-wire .column{
  width: 2px;
  height: 14px;
  background: #00baff;
}

/* 视频-右下线条 */
.video-box .right-bottom-wire{
  display: flex;
  flex-direction: column-reverse;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH; /*IE*/
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 99;
}

.video-box .right-bottom-wire .row {
  width: 16px;
  height: 2px;
  background: #00baff;
}

.video-box .right-bottom-wire .column{
  width: 2px;
  height: 14px;
  background: #00baff;
}

/* 右侧数据 */
.right-data{
  width: 16%;
  position: absolute;
  top: 0;
  right: 0;
}

.info-bg{
  padding: 14px;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  background: #0b4b8b;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  position: absolute;
}

.car-info{
  display: block;
  font-size: 14px;
  margin-top: 6px;
  color: #23f8ff;
}

/* 车牌号-左上线条 */
.info-bg .left-top-wire{
  position: absolute;
  top: -1px;
  left: -1px;
}

.info-bg .left-top-wire .row {
  width: 16px;
  height: 2px;
  background: #00baff;
}

.info-bg .left-top-wire .column{
  width: 2px;
  height: 14px;
  background: #00baff;
}

/* 车牌号-右上线条 */
.info-bg .right-top-wire{
  display: flex;
  position: absolute;
  top: -1px;
  right: -1px;
}

.info-bg .right-top-wire .row {
  width: 14px;
  height: 2px;
  background: #00baff;
}

.info-bg .right-top-wire .column{
  width: 2px;
  height: 16px;
  background: #00baff;
}

/* 车牌号-左下线条 */
.info-bg .left-bottom-wire{
  display: flex;
  flex-direction: column-reverse;
  position: absolute;
  left: -1px;
  bottom: -1px;
}

.info-bg .left-bottom-wire .row {
  width: 16px;
  height: 2px;
  background: #00baff;
}

.info-bg .left-bottom-wire .column{
  width: 2px;
  height: 14px;
  background: #00baff;
}

/* 车牌号-右下线条 */
.info-bg .right-bottom-wire{
  display: flex;
  flex-direction: column-reverse;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH; /*IE*/
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 99;
}

.info-bg .right-bottom-wire .row {
  width: 16px;
  height: 2px;
  background: #00baff;
}

.info-bg .right-bottom-wire .column{
  width: 2px;
  height: 14px;
  background: #00baff;
}

.monitor-num{
  line-height: 2.2;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

.max-height{
  max-height: 242px;
  overflow-y: auto;
}

.monitor-list{
  padding-right: 6px;
}

/* 设备浏览器滚动条 */
.max-height::-webkit-scrollbar{
  background-color: rgba(255, 255, 255, 0.02);
  width: .3rem;
}

.max-height::-webkit-scrollbar-thumb{
  width: .2rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

/* 返回按钮 */
.return{
  width: 400px;
  height: 400px;
  position: fixed;
  bottom: 0;
  right: 0;
  background: url("../images/ele.png") no-repeat bottom 24px right 4px;
  background-size: 300px 300px;
}

.return img{
  width: 110px;
  height: 110px;
  position: fixed;
  bottom: 40px;
  right: 40px;
  cursor: pointer;
}
</style>